<template>
	<view class="main-page">
		<image class="bg-header" :src="bgHeaderMine"></image>
		<view class="title-container">
			<text class="font-333-36 font-weight-600">我的</text>
		</view>
		
		<view class="header-box">
			<view class="header-info" :style="{marginTop:headMt+'rpx'}">
				<image class="info-bg" src="../../static/bg_header_info.png"></image>
				
				<view class="info-sub-box">
					<view class="row-container mt-30 ml-24" @click="handleAuth">
						<image class="avatar" :src="userInfo.headImg" v-if="userInfo.headImg"></image>
						<image class="avatar" src="../../static/ic_avatar_profile.png" v-else></image>
						<view class="column-container">
							<view class="row-container">
								<text class="font-661E1E-32 font-weight-600 mr-6">{{userInfo.nickName ? userInfo.nickName: "点击登录"}}</text>
								<image class="wh-16" src="../../static/ic_arrow_right_brown.png"></image>
							</view>
							<view class="row-container">
								<text class="font-661E1E-24">
								{{userInfo.mobile ? '手机号：' + userInfo.mobile : '点击立即认证'}}</text>
								<image class="wh-16 mt-4" src="../../static/ic_arrow_right_brown.png"></image>
							</view>
						</view>
					</view>
					
					<view class="row-container-row-between width-100p mb-30" 
					@click.stop="gotoVipCenter" v-if="hideVip != 1">
						<view class="row-container ml-24">
							<image class="vip-flag" src="../../static/ic_vip_name_mine.png"
								v-if="userInfo.checkVip == 1"></image>
							<image class="vip-flag" src="../../static/ic_no_vip.png"
								v-else></image>
							<text class="red-btn" v-if="userInfo.checkVip != 1">去开通</text>	
						</view>
						
						<view class="row-container mr-24" v-if="userInfo.checkVip == 1">
							<text class="font-661E1E-26">有效期至：{{userInfo.vipTime}}</text>
							<text class="red-btn ml-15">续费</text>
						</view>
					</view>
				</view>
				
				<view class="order-info-box">
					<view class="column-container-center width-33p">
						<text class="font-333-36 font-weight-600">
						{{userInfo.finishOrderCount ? userInfo.finishOrderCount: "0"}}</text>
						<text class="font-999-24 mt-6">总报名次数</text>
					</view>
					<view class="column-container-center width-33p">
						<text class="font-333-36 font-weight-600">
						{{userInfo.allIntegral ? userInfo.allIntegral : "0"}}</text>
						<text class="font-999-24 mt-6">总返还(元)</text>
					</view>
					<view class="column-container-center width-33p">
						<text class="font-333-36 font-weight-600">
						{{userInfo.balanceIntegral ? userInfo.balanceIntegral : "0"}}</text>
						<text class="font-999-24 mt-6">余额(元)</text>
					</view>
				</view>
			</view>
			<image class="vip-icon" src="../../static/ic_vip_crown.png" v-if="userInfo.checkVip"></image>
		</view>
		
		<!-- 余额记录和余额提现 -->
		<view class="amount-box">
			<view class="single-amount-box" @click="gotoScoreRecord">
				<image class="amount-ic" src="../../static/ic_score_record.png"></image>
				<view class="column-container">
					<text class="font-333-32 font-weight-600">余额记录</text>
					<text class="font-999-24 mt-4">记录支出与收入</text>
				</view>
			</view>
			<view class="single-amount-box" @click="gotoWithdraw">
				<image class="amount-ic" src="../../static/ic_withdraw_mine.png"></image>
				<view class="column-container">
					<text class="font-333-32 font-weight-600">余额提现</text>
					<text class="font-999-24 mt-4">提现到微信零钱</text>
				</view>
			</view>
		</view>
		
		<view class="enterace-box">
			<view class="row-container-row-between height-110"
			@click="gotoNotice">
				<view class="row-container">
					<image class="icon-single" src="../../static/ic_notice_mine.png"></image>
					<text class="font-333-32 font-weight-600">平台公告</text>
				</view>
				<view class="row-container">
					<text class="font-666-26">{{userInfo.notReadCount ? userInfo.notReadCount : '0'}}条未读</text>
					<image class="wh-24" src="../../static/ic_arrow_right_light.png"></image>
				</view>
			</view>
			<view class="row-container-row-between height-110"
			 @click="handleOpenCustomService">
				<view class="row-container">
					<image class="icon-single" src="../../static/ic_contact_us.png"></image>
					<text class="font-333-32 font-weight-600">联系我们</text>
				</view>
				<view class="row-container">
					<text class="font-666-26">工作日：早上10:00 - 晚上18:00</text>
					<image class="wh-24" src="../../static/ic_arrow_right_light.png"></image>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;" v-if="showAuthWindow">
			<AuthWindow></AuthWindow>
		</view>
		
		
	</view>
</template>

<script>
	import AuthWindow from '../../components/authWindow.vue'
	
	export default {
		data() {
			return {
				code:'' ,
				openId:"",
				showAuthWindow:false,
				userInfo:{
					toDayIntegral:0,
					checkVip:false,
					notReadCount:0
				},
				headMt:0 , // 顶部距离 是vip有间距
				bgHeaderMine:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240423113514.png',
				hideVip:0 , // 是否隐藏vip入口
			}
		},
		
		onLoad() {
			uni.showTabBar()
			
			let that = this
			uni.$on("authSuccess" , ()=>{
				that.showAuthWindow = false
				that.loadUserDetail()
			})
			
			uni.$on("authCancel" , ()=>{
				that.showAuthWindow = false
			})
		},
		
		onPullDownRefresh() {
			this.loadUserDetail()
		},
		
		onShow() {
			this.loadCheckVip()
			if (!this.cookie.get('jx_token')){  // 未授权店登录
				this.showAuthWindow = true
			} else{
				this.loadUserDetail()
			}
		},
		
		components:{
			AuthWindow
		},
		
		methods: {
			//检测是否显示vip入口
			loadCheckVip(){
				let that = this
				this.http({
					url:"/common/checkVipShow",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.hideVip = data.data
						}
					},
					failed(e){
					}
				})
			},
			
			handleAuth(){
				if (!this.cookie.get("jx_token")){
					this.showAuthWindow = true
				} else{
					uni.navigateTo({
						url:'/pages/mine/profile?registerTime=' + this.userInfo.registerTime
					})
				}
			},
			
			gotoScoreRecord(){
				if (!this.cookie.get("jx_token")){
					this.showAuthWindow = true
					return
				}
				
				uni.navigateTo({
					url:'/pages/mine/scoreRecord'
				})
			},
			
			gotoWithdraw(){
				if (!this.cookie.get("jx_token")){
					this.showAuthWindow = true
					return
				}
				
				uni.navigateTo({
					url:'/pages/mine/withdraw'
				})
			},
			
			gotoNotice(){
				uni.navigateTo({
					url:'./noticeList'
				})
			},
			
			loadUserDetail(){
				let that = this
				this.http({
					url:"/user/userCenter",
					method:"POST",
					hideLoading:true,
					data:{
						tagType : this.config.noticeTagType
					},
					success(data){
						if (data.code == 200){
							that.userInfo = data.data
							
							if (that.userInfo.checkVip == 1){
								that.headMt = 58
							} else{
								that.headMt = 0
							}
							
							that.cookie.set("jx_nickname" , data.data.nickName)
							that.cookie.set("jx_avatar" , data.data.headImg)
							that.cookie.set("jx_mobile" , data.data.mobile)
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//打开客服聊天
			handleOpenCustomService(){
				uni.openCustomerServiceChat({
					corpId:this.config.corpId ,
					extInfo: {url: this.cookie.get('customServiceUrl')},
					success(res){
						
					},
					fail(e){
						console.log('eeeeeeee-----' + JSON.stringify(e))
					}
				})
			},
			
			gotoVipCenter(){
				if (!this.cookie.get("jx_token")){
					this.showAuthWindow = true
				} else{
					uni.navigateTo({
						url:'/pages/mine/vipCenter'
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.bg-header{
		width: 100%;
		height: 930rpx;
		position: absolute;
	}
	.title-container{
		width: 100%;
		height: 88rpx;
		margin-top: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.header-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		margin: 10rpx 30rpx 20rpx 30rpx;
		position: relative;
		z-index: 20;
		
		.header-info{
			width: 100%;
			height: 412rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			
			.info-bg{
				width: 100%;
				height: 412rpx;
				position: absolute;
			}
			
			.info-sub-box{
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 262rpx;
				justify-content: space-between;
				z-index: 40;
				
				.avatar{
					width: 82rpx;
					height: 82rpx;
					border-radius: 50rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
				}
				
				.vip-flag{
					width: 214rpx;
					height: 38rpx;
					margin-right: 22rpx;
					flex-shrink: 0;
				}
				
				.red-btn{
					background: linear-gradient(90deg, #FF6565 0%, #FC4444 100%);
					border: 1rpx solid #FFFBDB;
					padding: 3rpx 15rpx;
					border-radius: 20rpx;
					color: #FFFCDC;
					font-size: 22rpx;
					font-weight: 600;
				}
			}
			
			.order-info-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				position: absolute;
				bottom: 34rpx;
				z-index: 30;
			}
			
			
		}
		
		.vip-icon{
			width: 220rpx;
			height: 220rpx;
			position: absolute;
			top: 7rpx;
			right: 25rpx;
			z-index: 50;
		}
		
	}
	
	.amount-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 0rpx 30rpx 20rpx 30rpx;
		z-index: 20;
		
		.single-amount-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 333rpx;
			height: 144rpx;
			background: white;
			border-radius: 16rpx;
			
			.amount-ic{
				width: 94rpx;
				height: 94rpx;
				margin-right: 16rpx;
			}
		}
	}
	
	.enterace-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		background: white;
		border-radius: 16rpx;
		margin: 0rpx 30rpx 20rpx 30rpx;
		padding: 0rpx 24rpx;
		z-index: 30;
		
		.icon-single{
			width: 58rpx;
			height: 58rpx;
			margin-right: 20rpx;
		}
	}
	
	button::after {
		border: none;//去除边框
	}
	
</style>
